<template>
  <div class="frame">
    <div class="toolbar">
      <toolbar></toolbar>
      <topNavbar :nav="nav"></topNavbar>
      <toolSetUp></toolSetUp>
    </div>
    <el-row>
      <el-col :span="3">
        <div class="navbar">
          <sideNavbar :nav="nav"></sideNavbar>
        </div>
      </el-col>
      <el-col :span="21">
        <div class="frameBg">
          <div class="scroll">
            <div class="frame-container">
              <transition name="router-fade" mode="out-in">
                <slot></slot>
              </transition>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
  import navApi from "../../service/navApi"
  import staffApi from '../../service/corporation/staffApi';
  export default {
    data(){
      return{
        nav:{},
        emName:""
      }
    },
    methods: {
      init(){
        //权限菜单判断
        let self = this;
        if(window.sessionStorage.getItem('navData') == undefined){
          navApi.getNavbar().then(function (response) {
            self.nav = response.body.data;
            window.sessionStorage.setItem('navData', JSON.stringify(self.nav));
          },function () {});
        }else{
          self.nav = JSON.parse(window.sessionStorage.getItem('navData'));
        };
//        if(window.sessionStorage.getItem('emName') == undefined){
//          staffApi.getLoginPersonInfo().then(
//            (response)=>{
//              self.emName = response.data.data.realName;
//              window.sessionStorage.setItem('emName', self.emName);
//            }
//          );
//        }else{
//          self.emName = window.sessionStorage.getItem('emName');
//        };

      },
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>

  .service-items-details {
    width: 100%;
    background-color: #ffffff;
  }

  .frameBg .scroll {
    height: calc(100vh - 77px);
    padding: 0 0.5%;
    background-color: #f5f7fa;
    overflow-x:hidden;
  }

  /*breadcrumb*/
  .service-items-details .breadcrumb {
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    padding-left: 30px;
    border-bottom: 10px solid #e9f0f9;
  }

  .service-items-details .el-breadcrumb {
    font-size: 14px;
    line-height: 50px;
  }

  .service-items-details .btn {
    width: 280px !important;
    margin: 40px 0px 40px 136px !important;
  }

  .btn .el-button {
    width: 120px !important;
  }
  .service-items-details .attr + div .el-form-item__error{
    top:148%!important;
  }
  .service-items-details .attr + .el-form-item__error{
    top:148%!important;
  }
  /*.el-button + .el-button {*/
    /*margin-left: 0px !important;*/
  /*}*/
  .service-items-details .form .el-date-editor.el-input{
    width: 39% !important;
    margin-right:3px;
  }
  .service-items-details .panel-content .el-input{
    display: inline-table!important;
  }
  .service-items-details .el-form-item__content{
    height: 36px!important;
  }
  .service-items-details .el-upload-list__item{
    width: 65% !important;
  }
  .service-items-details .mask{
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    z-index: 1000;
  }
  .service-items-details .mask .preview-pic{
    width:720px;
    height:auto;
    position: absolute;
    left: 50%;
    margin-left: -360px;
    margin-top: 80px;
  }
  .service-items-details .photo .prompt{
    position: absolute;
    left: 205px;
    top: 168px;
    color:#8391a5;
    font-size: 12px;
  }
  .service-items-details .pic .prompt{
    position: absolute;
    left: 118px;
    top: 112px;
    color:#8391a5;
    font-size: 12px;
  }
  .el-tag{
    margin-right: 20px;
  }
  /*avatar*/
  .avatar-uploader{
    line-height: normal;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .service-items-details .photo .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 192px;
    height: 192px;
    line-height: 192px;
    text-align: center;
    border:1px dotted #8c939d;
  }
  .service-items-details .pic .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 65px;
    height: 65px;
    line-height: 65px;
    text-align: center;
    margin-top: 22px;
  }
  .service-items-details .photo .avatar {
    width: 192px;
    height: 192px;
    display: block;
  }

  .service-items-details .pic .avatar {
    width: 65px;
    height: 65px;
    display: block;
    margin-top: 22px;
    margin-left: 15px;
  }
  .service-items-details .pic .detailsText{
    width: 350px;
    height: 110px;
    border:1px dotted #8c939d;
    border-radius: 5px;
    position: relative;
  }
  .service-items-details .pic .picName{
    position: absolute;
    top: 37px;
    left: 100px;
    cursor: pointer;
    color:#20A0FF;
  }
  .frame .toolbar{
    position: relative;
  }
  /*btnColor*/
  .lightGreenBtn{
    background-color:#0cb7c6!important;
    color:#fff!important;
    border:1px solid #0cb7c6!important;
  }
  .btns .el-button{
    margin-right: 0px;
    border: 1px solid #0cb7c6;
    color: #0cb7c6;
  }
  /*panel*/
  .panel-title{
    font-size: 16px!important;
    position:relative;
    left:0px;
    margin: 0px 0 20px 0;
    font-weight:bold;
    font-family:"微软雅黑";
    padding:10px 25px;
    background-color: #ededed;
    border-left: 4px solid #0cb7c6;
  }
  .panel-title.first{
    /*margin-top:30px;*/
  }

  .panel-content{
    margin-bottom:20px;
    padding-left: 15px;
  }

  /*toptitle*/
  .toptitle{
    font-size: 28px;
    color: #111111;
    margin: 15px 0px 8px 0px;
    font-weight:bold;
    padding-left: 15px;
    border-left: 5px solid #0cb7c6;
    overflow: hidden;
  }
  .toptitle .left{
    float: left;
  }
  .toptitle .right{
    float: right;
  }
  /*pager*/
  .el-pager li.active{
    border-color:  #0cb7c6;
    background-color:  #0cb7c6;
    color: #fff;
    cursor: default;
  }
  /*select-dropdown*/
  .el-select-dropdown__item.selected{
    color: #fff;
  }
  /*dialog*/
  .el-dialog__header{
    padding: 10px 20px!important;
    background-color:#0cb7c6!important;
  }
  .el-dialog__title {
    color: #ffffff !important;
  }
  .el-dialog__body{
    padding:30px 36px 0px 20px!important;
    /*border:1px solid #cccccc;*/
  }
  .el-dialog .input-item{
    margin:10px 0 15px 0;
    padding-left: 28px;
  }
  .el-dialog .el-input{
    width: 100% !important;
  }
  .el-dialog .el-form{
    padding-left: 0px!important;
  }
  .el-dialog .el-select{
    width: 100%!important;
  }
  .el-form--label-top .el-form-item__label{
    padding:0 0 5px!important;
  }
  .dialog-title-teambed{
    padding:10px 20px;
    background-color:#0cb7c6;
    color:#fff;
    font-size:16px;
    margin-bottom: 10px;
  }
  /*会员管理-审批条目*/
  .member-process-approval-item{
    background-color:#eef1f6;
    margin-bottom:5px;
    font-size: 14px;
    padding:10px 15px;
  }
  /*流程图*/
  .step-show{
    margin-bottom:15px;
    color: #0cb7c6;
    font-size: 14px;
    cursor: pointer;
    width: 130px;
  }
  .step-show .step-show-img{
    width: 32px;
    height: 32px;
    vertical-align:middle
  }



</style>
